<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/dashboard' }">控制台</el-breadcrumb-item>
            <el-breadcrumb-item>操作员日志</el-breadcrumb-item>
        </el-breadcrumb>
        <hr>

        <el-card style="font-size: 20px;font-family: 'Helvetica Nee',serif">
            <b>操作员日志</b>
            <p style="font-size: 15px">管理员可以查看自己所拥有的权限的管理员日志</p>
        </el-card>
        <el-card class="box-card">
            <div class="card-header">
                <el-row>
                    <el-col :span="21">
                        <Button type="error" icon="md-trash">批量删除</Button>
                    </el-col>
                    <el-col :span="3">
                        <Input search enter-button placeholder="请输入搜索的内容" @on-search="search()"/>
                    </el-col>
                </el-row>
            </div>

            <el-table :border="true" ref="multipleTable" :data="tableData" tooltip-effect="dark" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="50"></el-table-column>
                <el-table-column fixed prop="id" label="ID" width="60"></el-table-column>
                <el-table-column prop="thumUrl" label="用户名" width="80"></el-table-column>
                <el-table-column prop="code" label="标题" width="200"></el-table-column>
                <el-table-column prop="name" label="url">
                    <el-input v-model="input" style="width: 250px" placeholder="请输入内容"></el-input>
                    <el-button  icon="el-icon-link"></el-button>
                </el-table-column>
                <el-table-column prop="address" label="IP" width="250"></el-table-column>
                <el-table-column prop="area" label="Browser" width="150"></el-table-column>
                <el-table-column prop="area" label="创建时间" width="150"></el-table-column>
                <el-table-column align="center" label="操作" width="120" fixed="right">
                    <template>
                        <ButtonGroup>
                            <Button type="error" icon="md-trash"></Button>
                        </ButtonGroup>
                    </template>
                </el-table-column>
            </el-table>

            <div class="block">
                <Page :total="40" show-elevator show-sizer />
            </div>

        </el-card>
    </div>
</template>

<script>
    export default {
        // eslint-disable-next-line vue/multi-word-component-names
        name: "index",
        data() {
            return {
                searchText: "",
                option: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶'
                }, {
                    value: '选项3',
                    label: '蚵仔煎'
                }],
                options: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶'
                }, {
                    value: '选项3',
                    label: '蚵仔煎'
                }],
                tableData: [{
                    id: "1",
                    thumUrl: '图片',
                    code: 'CM2017110200002',
                    name: '重庆xxx小区',
                    address: '重庆市两江新区xx街道',
                    area: '3109000.00',
                    buildings: '75',
                    households: '65031',
                    greeningRate: '40.00',
                    developer: '帝瓦雷后方可哇好看大大',
                    estate: 'xxxx物业管理公司',
                    gmtCreate: '2016-05-07',
                }],
                input: ''
            }
        },
        methods: {
            search() {

            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },
            goBack() {
                console.log('go back');
            },
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            }
        }
    }
</script>

<style scoped>
    .card-header {
        margin-bottom: 20px;
    }

    .block {
        text-align: center;
        margin-top: 10px;
    }

    .el-select {
        margin-left: 15px;
        margin-right: 30px;
    }

    .el-date-picker {
        margin-left: 50px;
    }
</style>
